<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/Class honor.css">
    <link rel="stylesheet" href="../css/common.css">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <link href="../css/pagination.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="../css/layui.css">
    <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
    <title>更多班规</title>
    <style>
        .contain {
            position: absolute;
            width: 86%;
            height: 100%;
        }
        
        .lb {
            position: absolute;
            width: 100%;
            left: 0%;
            height: 35%;
            top: 0;
        }
        
        #photo {
            position: absolute;
            width: 100%;
            height: 100%;
            float: left;
            overflow: hidden;
        }
        
        #test1 {
            width: 100%;
            height: 100%;
        }
        
        #photo img {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }
        
        .morebody {
            background-color: white;
            height: 58%;
            width: 100%;
            margin-top: 24%;
        }
        
        .title-nav {
            width: 95%;
            margin: 0 auto;
        }
        
        .iconfont {
            font-family: "iconfont" !important;
            font-size: 50px;
            color: #0E90D2;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        .titlle-nav-lg {
            font-size: 30px;
            color: #0E90D2;
            font-family: "微软雅黑";
        }
        
        .iconfont {
            font-family: "iconfont" !important;
            font-size: 50px;
            color: #0E90D2;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        .title-navs {
            width: 100%;
            float: left;
            margin-top: 3px;
        }
        
        .ruleword {
            margin-top: 20px;
            margin-bottom: 20px;
        }
        
        i,
        .massage i,
        .classrule i {
            font-family: "icomoon";
            font-style: normal;
            font-size: 26px;
            color: #0E90D2;
        }
        
        #pagination-demo1 {
            position: absolute;
            left: 40%;
            bottom: 58px;
            width: auto;
            height: auto;
        }
        
        #sm_contain>li {
            border-bottom: 1px dashed #0E90D2;
            line-height: 35px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
        
        #sm_contain {
            width: 94%;
            height: 370px;
            padding: 15px 0px 0px 20px;
            background-color: #E8E8E8;
            margin-left: 23px;
        }
        
        #sm_contain>li>a>i {
            color: #a0a0a0;
            font-family: "icomoon";
            font-style: normal;
            font-size: 14px;
        }
        
        #sm_contain_li_a {
            float: left;
            display: block;
            width: 75%;
            font-size: 16px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <div class="all">
        <div class="lb">
            <div class="photo" id="photo">
                <div class="layui-carousel" id="test1" lay-filter="test1">
                    <div carousel-item="" id="lb-img">
                        <div><img src="../images/class1.jpg" alt=""></div>
                        <div><img src="../images/class5.jpg" alt=""></div>
                        <div><img src="../images/class1.jpg" alt=""></div>
                        <div><img src="../images/class5.jpg" alt=""></div>
                        <div><img src="../images/class1.jpg" alt=""></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="morebody">
            <div class="title-nav" style="margin-top:22em">
                <div class="title-navs ruleword">
                    <i></i>
                    <span class="titlle-nav-lg">更多班规</span>
                </div>
                <hr style=" border: 1px dashed #0E90D2;margin-left:1em;">

                <div id="sm_contain">

                    <li v-for="(user,index) in rulelist">

                        <a id="sm_contain_li_a"><i></i>{{user.content}}

                        </a>
                        <span style="widows: 15%; float:right; margin-right: 20px;">{{user.data.slice(0, 10)}}</span>

                    </li>
                    <br>

                </div>
                <section>
                    <div id="pagination-demo1"></div>
                </section>
            </div>


        </div>
        <!-- <div class="morebody"></div> -->
        <!-- footer -->
        <div id="footer">
            <div class="bottominfo">
                版权所有：西华师范大学 The Fighting 团队
                </br>
                Copyright © 2018 10-2018 12 / 5000 China West Normal University The Fighting Team
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="../layui/layui.js" charset="utf-8"></script>
    <script>
        layui.use('carousel', function() {
            var carousel = layui.carousel;
            //建造实例
            carousel.render({
                elem: '#test1',
                width: '100%' //设置容器宽度
                    ,
                height: '100%',
                arrow: 'always' //始终显示箭头
                    //,anim: 'updown' //切换动画方式
            });
        });
    </script>
</body>
<script>
    var vm = new Vue({
        // 绑定对象
        el: '#sm_contain',
        data: {
            rulelist: []
        },
        mounted() {
            this.addRuleList()
        },
        methods: {
            addRuleList() {
                // this.rulelist = listtry.concat(); //复制数组
                $.post(
                    "http://127.0.0.1/ruleslist", {

                    },
                    (resp) => {
                        if (resp.code == 200) {
                            layui.use('laypage', () => {
                                var laypage = layui.laypage;

                                //执行一个laypage实例
                                laypage.render({
                                    elem: 'pagination-demo1' //注意，这里的 test1 是 ID，不用加 # 号
                                        ,
                                    count: resp.data.length //数据总数，从服务端得到
                                        ,
                                    limit: 10,
                                    jump: (obj, first) => {
                                        var newList = resp.data.concat();
                                        console.log("当前页码", obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                                        this.rulelist = newList.slice((obj.curr - 1) * 10, (obj.curr - 1) * 10 + 10)
                                        console.log(newList.slice((obj.curr - 1) * 10, (obj.curr - 1) * 10 + 10))

                                        //首次不执行
                                        if (!first) {
                                            //do something
                                        }
                                    }
                                });
                            });
                        } else {
                            alert(resp.msg);
                        }
                    }
                );
            }
        }

    })
</script>

<script>
</script>
<script src="../js/pagination.js"></script>

</html>